<template>
	<u-popup v-model="show" mode="bottom" closeable height="auto">
		<view class="u-dialog detail-sku bg-white">
			<view class="header u-flex u-col-bottom">
				<view class="cover">
					<image :src="get_img" mode="aspectFill"></image>
				</view>
				<view class="u-flex-col">
					<view class="text-price text-red u-font-40 text-bold">
						{{get_goods_sold_price}}
					</view>
					
					<view class="u-font-24 u-m-t-10" v-if="get_has_sku && current_sku.id">
						<text class="text-gray u-m-r-20">已选</text> {{current_sku.name}}
					</view>
				</view>				
			</view>
			<view class="body" >
				<view class="popupSkuArea">					
					<view class="sku_item" v-for="(item,index) in get_sku_attr" :key="index">
						<view class="sku_kind"> {{item.name}} </view>
						<view class="sku_choose">
							<text class="item"
								:class="{active:checked_sku['attr_checked_index_'+index]===attr_index}"
								v-for="(attr,attr_index) in item.content" :key="attr_index"
								@click="handleSelectItem(index,attr_index,item,attr,$event)">{{attr}}</text>
						</view>
					</view>
				</view>
				<view class="count_choose u-flex u-row-between">
					<view class="count">
						购买数量
					</view>
					<view class="num_wrap u-flex-1 u-flex u-row-right">
						<u-number-box v-model="num" :min="1" :max="99"></u-number-box>				
					</view>
				</view>
			</view>
			<view class="btn-group">				
				<view class="btn" v-if="!get_sold_status">
					<button class="cu-btn round bg-blue">已下架</button>
				</view>
				<view class="btn" v-else-if="get_stock_num>0">
					<button class="cu-btn round bg-red" @click="handleBtnOpt('cart')">加入购物车</button>
					<button class="cu-btn round bg-orange" @click="handleBtnOpt('buy')">立即购买</button>
				</view>
				<view class="btn" v-else>
					<button class="cu-btn round bg-pink">已售馨</button>
				</view>
			</view>
		</view>
	</u-popup>
</template>


<script>
	export default {
		props: {
			//数据对象
			goodsDetail: {
				type: Object,
				default: () => {}
			},
			skuId: {
				type: [Number, String],
				default: '',
			},
			showPage: {
				type: String,
				default: '',
			}
		},

		data() {
			return {
				show: false,
				num: 1,
				//控制选中效果
				checked_sku: {},
				//当前选择sku
				current_sku: {},
				
				closeAble:''
			};
		},
		computed: {
			get_sku_attr() {
				return this.goodsDetail.sku_attr || []
			},
			get_sku_price() {
				return this.goodsDetail.sku_price || []
			},
			get_has_sku() {
				//验证产品是否有sku
				return this.get_sku_price.length > 0
			},
			//验证是否是销售状态
			get_sold_status() {
				if (this.get_has_sku) {
					return this.current_sku.status === 1
				} else {
					return true;
				}
			},
			get_sku_price_object() {
				const obj = {}
				this.get_sku_price.map(function(item) {
					obj[item.name] = item
				})
				return obj
			},
			get_goods_name() {
				let goods_name = this.goodsDetail.name || ''
				
				return goods_name
			},
			get_goods_sold_price() {
				let sold_price = this.goodsDetail.sold_price || '0.00'
				if (this.get_has_sku) {
					sold_price = this.current_sku.sold_price
				}
				return sold_price
			},
			get_stock_num() {
				let num = this.goodsDetail.stock || 0
				if (this.get_has_sku) {
					num = this.current_sku.stock
				}
				return num
			},
			
			get_img(){
				if(this.current_sku.img){
					return this.current_sku.img
				}else{
					return this.goodsDetail.cover_img
				}
			}
		
		},
		watch: {
			goodsDetail: {
				handler: function(detail, oldDetail) {
					console.log('-watch-goodsDetail--', detail, this.skuId)
					let sku_attr = detail.sku_attr || []
					sku_attr.map((item, index) => {
						let key = this.getSkuKey(index);
						this.$set(this.checked_sku, key, 0)
					})
					this.$nextTick(() => {
						this.handleSku(this.skuId)
					})

				},
			}
		},
		methods: {
			popupOpen() {
				this.show = true
			},
			getSkuKey(index) {
				return 'attr_checked_index_' + index
			},
			handleSelectItem(sku_index, attr_index, item, attr, e) {
				let key = this.getSkuKey(sku_index);
				if (this.checked_sku[key] !== attr_index) {
					this.$set(this.checked_sku, key, attr_index)
					this.$nextTick(() => {
						this.handleSku()

					})
				}
			},
			handleSku(sku_id) {
				if (sku_id) {
					for (let i = 0; i < this.get_sku_price.length; i++) {
						const info = this.get_sku_price[i]
						if (sku_id + '' === info.id + '') {
							const _group_name = info.name.split(',')
							this.get_sku_attr.map((item, index) => {
								const _name = _group_name[index]
								const _group_content = item.content || []
								// console.log('++++++++++',_group_content,_name,_group_content.indexOf(_name))
								let key = this.getSkuKey(index);
								this.$set(this.checked_sku, key, _group_content.indexOf(_name))
							})
							this.current_sku = info
							this.$emit('skuChange', this.current_sku, this.get_goods_sold_price)
							return
						}
					}
				}

				let group_name = [];
				this.get_sku_attr.map((item, index) => {
					let key = this.getSkuKey(index);
					let value = this.checked_sku[key]
					group_name.push(item.content[value])
				})
				const group_name_str = group_name.join(',')
				//匹配当前sku
				this.current_sku = this.get_sku_price_object[group_name_str] || {}
				this.$emit('skuChange', this.current_sku, this.get_goods_sold_price)
				console.log(this.checked_sku, group_name, this.current_sku, this.get_goods_sold_price)
			},
			handleBtnOpt(type) {
				const sku_id = this.current_sku.id || 0
				if (type === 'cart') {
					this.$emit('addCart', this.goodsDetail, sku_id,!sku_id ? {_num:this.num} : {
						_num:this.num,
						sku_id:sku_id,
						sku_name:this.current_sku.name,
						sold_price:this.current_sku.sold_price,
					})
					
					this.$u.http.post('/api/goods/cartAdd',{
						goods_info:[
							{
								goods_id: this.goodsDetail.id,
								sku_id:sku_id,
								num:this.num,
							},
						]
					}).then(({data,msg})=>{
						console.log(data)
						this.$u.toast(msg);
						//变更购物车数量
						this.$store.commit('handleCartNum', {num:data.num})
						this.$emit('cartChangeNum', this.goodsDetail, sku_id,data.num)
					});
				} else {
					uni.navigateTo({
						url: '/pages/order/order_confirm?goods_id=' +this.goodsDetail.id + '&sku_id=' + sku_id + '&num=' + this.num
					});
					// this.$emit('buy', this.goodsDetail.id, this.current_sku.id || 0, this.num)
				}
			}
		}

	};
</script>


<style lang="scss">
	.detail-sku{
		min-height: 800rpx;
		max-height: 1110rpx;
		.header {
			padding: 30rpx;
			.cover {
				width: 180rpx;
				height: 180rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.body {
			overflow: auto;
			max-height: 700rpx;
			padding-bottom: 140rpx;
			.popupSkuArea {
				.sku_kind {
					font-size: 26rpx;
					font-weight: bold;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0rpx 30rpx;
				}
				.sku_choose {
					padding: 0 8rpx;
					overflow: hidden;
					 .item {
					    padding: 0 30rpx;
					    min-width: 60rpx;
					    max-width: 540rpx;
					    overflow: hidden;
					    height: 60rpx;
					    line-height: 60rpx;
					    float: left;
					    text-align: center;
					    margin-left: 24rpx;
					    margin-bottom: 20rpx;
					    font-size: 22rpx;
					    color: #262626;
					    background: #f2f2f2;
					    border-radius: 30rpx;
						box-sizing: border-box;
						&.active {
						    background: #fcedeb;
						    border: 1rpx solid #f2270c;
							line-height: 58rpx;
						    font-size: 22rx;
						    color: #f2270c;
						    font-weight: 700;
						}
					}
				}
			}
			.count_choose {
				padding: 20rpx 30rpx;
				.count {
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
		.btn-group {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 12rpx 0rpx 12rpx 30rpx;
			.btn {
				width: 100%;
				display: flex;
				.cu-btn {
					flex: 1;
					height: 80rpx;
					font-weight: bold;
					margin-right: 30rpx;
					box-shadow: 0 3px 6px 0 rgba(255,65,66,0.2);
				}
			}
		}
	}
</style>
